import React, { useState, useEffect, } from 'react';
import { Card, Button, Table, Modal, Row, Input, Col, message, } from 'antd';
import {
  fetchGoodsList,
  fetchGoodsSelectById,
} from '@/services/goodCenter/goods'
import GapBlock from '@/components/GapBlock';
import { parse } from 'url';
import { connect } from 'dva';

const GoodsTable = connect(({goods}) => ({goods}))(props => {
  const { data, total, init, params, goods, dispatch, } = props
  const { goodsSPEC } = goods
  const [sizeList, setSize] = useState([])
  const [visible, setVisible] = useState(false)
  const [titleName, setTitle] = useState('')
  const goodsData = []
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      render: (t, r) => <div>
        <img src={r.shareImage} style={{width: 50}} />
        {t}
      </div>
    },
    {
      title: '价格',
      key: 'shopPrice',
      dataIndex: 'shopPrice',
    },
    {
      title: '库存',
      key: 'goodsStockNum',
      dataIndex: 'goodsStockNum',
    },
    {
      title: '商品编码',
      key: 'goodsCode',
      dataIndex: 'goodsCode',
    },
    {
      title: "操作",
      key: 'action',
      dataIndex: 'action',
      render: (t, r) => <><a onClick={handleSPEC.bind(this, r)}>选择规格</a>&nbsp;<a onClick={saveGoods.bind(this, r)}>选取</a></>
    }
  ]

  const col = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      render:() => <>{titleName}</>
    },
    {
      title: '价格',
      key: 'shopPrice',
      dataIndex: 'shopPrice',
    },
    {
      title: '库存',
      key: 'goodsQty',
      dataIndex: 'goodsQty',
    },
    {
      title: '规格',
      key: 'key',
      dataIndex: 'key',
    },
  ]

  const saveGoods = (r) => {
    if (r) {
      goodsData.push(r)
    }
    dispatch({
      type: 'goods/saveData',
      payload: {
        goodsSPEC: [
          ...goodsSPEC,
          ...goodsData,
        ]
      }
    })
  }

  const handleSPEC = (r) => {
    setVisible(!visible)
    selectGoods({
      resGoods: {id: r.id}
    })
    setTitle(r.goodsName)
  }

  const selectGoods = async p => {
    const res = await fetchGoodsSelectById(p)
    // message.info(res.msg)
    setSize(res.data.resGoodsNormDetailPrices)
    setVisible(!visible)
  }
  const pagination = {
    total,
    onChange (page) {
      init({
        ...params,
        pageNo: page,
      })
    }
  }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      goodsData.push(selectedRows)
      dispatch({
        type: 'goods/saveData',
        payload: {
          goodsSPEC: [
            ...goodsSPEC,
            ...goodsData,
          ]
        }
      })
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        pagination={pagination}
        rowKey={r => r.id}
      />
      <Modal
        visible={visible}
        onCancel={() => setVisible(!visible)}
        footer={null}
      >
        <Table 
          columns={col}
          rowSelection={rowSelection}
          dataSource={sizeList}
          rowKey={r => r.id}
        />
      </Modal>
    </>
  )
})

const AddCombineGoods = props => {
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    },
    {
      title: '商品编码',
      key: 'goodsCode',
      dataIndex: 'goodsCode',
    },
    {
      title: '价格',
      key: 'shopPrice',
      dataIndex: 'shopPrice',
    },
    // {
    //   title: '规格',
    //   key: '',
    //   dataIndex: 'center',
    // },
    {
      title: '库存',
      key: 'goodsStockNum',
      dataIndex: 'goodsStockNum',
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: "操作",
      key: 'action',
      dataIndex: 'action',
      render: (t, r, i) => <><a onClick={removeData.bind(this, i)}>删除</a></>
    }
  ]
  const [goodsList, setGoods] = useState([])
  const [visible, setVisible] = useState(false)
  const [goodsTol, setGoodsTol] = useState(null)
  const { goods, dispatch, } = props
  const { goodsSPEC } = goods
  const [params, setParams] = useState({
    goodsName: "",
    isAdmin: 1,
    listStatus: [1],
    page: {isAsc: "", orderByField: ""},
    pageNo: 1,
  })

  useEffect(() => {
    init()
  }, [])

  const init = async (param = params) => {
    const res = await fetchGoodsList(param)
    setGoodsTol(parseInt(res.total))
    res.code == 0 ? setGoods(res.data) : message.info(res.msg)
  }

  const removeData = i => {
    const newData = [...goodsSPEC]
    newData.splice(i, 1)
    dispatch({
      type: 'goods/saveData',
      payload: {
        goodsSPEC: newData
      }
    })
  }

  return (
    <Card title={<b style={{ fontSize: 14 }}>组合商品信息</b>}>
      <div><Button onClick={() => setVisible(!visible)}>添加商品</Button></div>
      <GapBlock />
      <Table 
        columns={columns}
        rowKey={r => r.id}
        dataSource={goodsSPEC}
      />
      <Modal 
        title={'选择商品'}
        visible={visible}
        onCancel={() => setVisible(!visible)}
        width={800}
        footer={null}
      >
        <Row>
          <Col span={20}><Input /></Col>
          <Col span={4}><Button>查找</Button></Col>
        </Row>
        <GoodsTable data={goodsList} total={goodsTol} init={init} params={params} />
      </Modal>
    </Card>
  );
};

export default connect(({goods}) => ({goods}))(AddCombineGoods);